<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板字符串</title>
</head>
<body>
  <script>
    // ES6 引入新的声明字符串的方式  ``  ''  ""
    // 1. 声明
    /* 
      let str = `我也是一个字符串哦!`;
      console.log(str, typeof str); 
    */

    // 2. 内容中可以直接出现换行符
    /* 
      let str = '<ul>
                  <li>沈腾</li>
                  <li>玛丽</li>
                  <li>魏翔</li>
                  <li>艾伦</li>
                </ul>'; 
      
      折行会报错：
      Uncaught SyntaxError: Identifier 'str' has already been declared
    */

    let str = `<ul>
                  <li>沈腾</li>
                  <li>玛丽</li>
                  <li>魏翔</li>
                  <li>艾伦</li>
                </ul>`; 
    
    // 3. 变量拼接
    let lovest = '魏翔';
    let out = `${lovest}是我心目中最搞笑的演员!!`;
    console.log(out);

    // 标签模板
    function func(literals, ...substituions) {
      console.log(literals)  // ['<p>', '</p><p>', '</p>', raw: Array(3)]
      console.log(substituions)  // ['strick', 29]
    }
    
    var name = "strick",
        age = 29;
    func`<p>${name}</p><p>${age}</p>`

    // String.raw应用
    let html = `<p>\t</p>`
    console.log(html)

    html = String.raw`<p>\t</p>`  // String.raw不转义
    console.log(html)
  </script>
</body>
</html>